9. RSC, Streaming SSR의 단점 해소

1. Server Component의 이점

React Server Component의 이점은 다음과 같음

Server Component는 클라이언트 쪽으로 코드를 전달하지 않기 때문에, 용량이 큰 의존성들은 여전히 서버 쪽에 남아있게 됨

결과적으로 네트워크가 느리거나 성능이 좋지 않은 디바이스들에게 .js 번들을 다운로드, 파싱, 컴포넌트를 렌더링해야 하는 부담을 덜어주며,

추가적으로 Hydration 단계를 제거해주고, 애플리케이션의 로딩과 상호작용을 더 빠르게 해줌

Server Component는 데이터베이스(DB)나 파일 시스템과 같은 서버 사이드에 위치한 리소스에 직접적으로 접근이 가능하기 때문에, 클라이언트 사이드에서 별도의 추가적인 처리를 할 필요가 없이 효과적인 데이터 fetching과 렌더링이 가능해짐

서버의 강력한 컴퓨팅 파워와 데이터 소스에 대한 근접성을 활용하여 렌더링 작업을 관리하고 사용자와의 인터랙션이 필요한 코드 조각만 클라이언트에 전송함

Server Component의 독립적인 서버 쪽 코드의 실행은 민감한 데이터나 로직을 보호함으로써 보안을 강화함 (token, api key 등)

클라이언트 쪽에 작성된 코드들은 브라우저의 개발자 도구를 통해 대부분 역공학(Reverse Engineering)이 가능하기 때문에 보안상 취약함

일반적으로 useEffect 훅을 사용하여 Client 사이드로부터 외부의 데이터를 가져올 때, 부모 컴포넌트의 데이터 로딩이 마칠 때까지 자식 컴포넌트는 데이터 로딩을 시작할 수 없음

이러한 순차적인 데이터 fetching은 종종 좋지 않은 성능을 냄

주요 문제는 왕복 그 자체가 아니라 클라이언트에서 서버로 왕복한다는 것

Server Component는 이러한 왕복 문제를 서버 사이드 쪽으로 전환시키기 위해 이러한 로직들을 서버로 이전시킴으로써 요청 지연은 감소하고, 전체 성능은 개선되며, client-server간 요청 워터폴을 제거함

서버에서는 화면에 표시할 기본적인 HTML 엘리먼트들을 렌더링하여 응답하기 때문에 초기 페이지 로딩 시간이 줄어들게됨(FCP 시간 감소)

Server Component는 Next.js에서 기본값으로 적용되어 있기 때문에, 생성한 컴포넌트는 별도의 설정 없이 서버 컴포넌트로 동작하게 됨

따라서 Client Component처럼 컴포넌트의 상단에 'use client'처럼 별도로 작성할 필요가 없음

결과적으로 컴포넌트를 Client / Server로 구분하여,

사용자에게 웹 페이지 로딩에 필요한 전체 코드를 다운받도록 강제하지 않음으로써, 성능이 좋지 않은 디바이스에서 사용한다고 하더라도, 응답 속도를 향상시킬 수 있음